<template>
	<div class="navFooter">
		<van-tabbar v-model="active" active-color="#5A63AE" inactive-color="#505660">
			<van-tabbar-item replace :to="item.to" :name="item.name" v-for="(item,index) in navList" :key="index">
				<span class="tab-text">{{item.text}}</span>
				<template #icon="props">
					<img :src="props.active ? item.active : item.inactive" />
				</template>
			</van-tabbar-item>
		</van-tabbar>
	</div>
</template>
<script>
	import { ref } from 'vue';
    import { useRouter } from 'vue-router'
    
	export default {
		setup() {
            const router = useRouter();
			const active = ref(router.currentRoute.value.name);
			const navList = [{
					to: '/',
					name: 'home',
					text: '首页',
					active: new URL('../assets/1.jpg',import.meta.url).href,
					inactive: new URL('../assets/1.jpg',import.meta.url).href,
				},
				{
					to: '/add',
					name: 'add',
					text: '添加案件',
					active: new URL('../assets/1.jpg',import.meta.url).href,
					inactive: new URL('../assets/1.jpg',import.meta.url).href,
				},
				{
					to: '/echarts',
					name: 'echarts',
					text: '自动分析',
					active: new URL('../assets/1.jpg',import.meta.url).href,
					inactive: new URL('../assets/1.jpg',import.meta.url).href,
				},
				{
					to: '/my',
					name: 'my',
					text: '我的',
					active: new URL('../assets/1.jpg',import.meta.url).href,
					inactive: new URL('../assets/1.jpg',import.meta.url).href,
				}
			]
			return {
				active,
				navList
			};
		},
	}
</script>
<style lang='less' scoped>
	.navFooter {
       /deep/.van-tabbar{
        height: 70px;
       }
	}
    /deep/.tab-text{
        font-size:18px!important;
    }
    .tab-text{
        font-size:20px;
    }
    /deep/.van-tabbar-item--active{
        font-weight:bold;
    }
    /deep/.van-tabbar-item__icon img{
        width:40px;
        height:40px;
    }
</style>
